<template>
  <li>
    <h4 class="module-title">
      <a href="" target="_blank">{{ title }}</a>
    </h4>
    <a target="_blank" href="" class="static-img mt15">
      <img :src="imageUrl" :alt="title" style="width: 100%; height: auto; display: block;" />
    </a>
    <div class="module-interact">
      <a href="" target="_blank">
        <svg class="icon" aria-hidden="true" style="width: 24px; height: 24px">
          <use xlink:href="#icon-zhiboguankanshu"></use></svg
          >{{ views }}
      </a>
      <a href="" target="_blank">
        <svg class="icon" aria-hidden="true" style="width: 22px; height: 22px">
          <use xlink:href="#icon-pinglun4"></use></svg
          >{{ comments }}
      </a>
    </div>
  </li>
</template>

<script setup lang="ts">
// 定义组件的属性
interface Props {
  title: string;
  imageUrl: any; // 修改为any类型以支持导入的图片对象
  views: number;
  comments: number;
}

const props = withDefaults(defineProps<Props>(), {
  title: "",
  imageUrl: "",
  views: 0,
  comments: 0,
});


</script>

<style scoped>
li {
  width: 365px;
  margin-right: 7px;
  padding: 0 15px;
}

h4.module-title {
  font-size: 22px;
  line-height: 28px;
  font-weight: bold;
  margin-bottom: 12px;
}

a.static-img {
  display: block;
}

.static-img img {
  width: 100%;
  height: auto;
  display: block;
}

.module-interact {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  font-size: 14px;
  justify-content: center;
  a {
    color: #666;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    &:hover {
      color: #9d1518;
    }
  }
  .iconfont {
    font-size: 16px;
  }
}

.mt15 {
  margin-top: 15px;
}
</style>
